{% extends "base.html" %}

{% block title %}分析结果页面测试 - {{ super() }}{% endblock %}

{% block extra_css %}
<link href="/static/css/pages/ai-analysis/analysis-results.css" rel="stylesheet">
<link href="/static/css/analysis-result-details.css" rel="stylesheet">
<style>
    .test-launcher {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    .test-hero {
        text-align: center;
        padding: 4rem 2rem;
        color: white;
    }

    .test-hero h1 {
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .test-hero p {
        font-size: 1.25rem;
        opacity: 0.9;
        margin-bottom: 2rem;
    }

    .test-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .test-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    }

    .test-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .test-btn {
        width: 100%;
        padding: 1rem;
        border: none;
        border-radius: 0.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .test-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .test-features {
        background: rgba(255,255,255,0.1);
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        backdrop-filter: blur(10px);
    }

    .test-feature {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        color: white;
    }

    .test-feature i {
        margin-right: 1rem;
        font-size: 1.2rem;
    }

    .test-status {
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        min-width: 200px;
        z-index: 1000;
    }

    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .progress-bar {
        width: 100%;
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
        margin: 1rem 0;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #2ecc71);
        width: 0%;
        transition: width 0.3s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="test-launcher">
    <!-- 页面头部 -->
    <div class="test-hero">
        <h1><i class="fas fa-flask mr-3"></i>分析结果页面测试</h1>
        <p>全面验证分析结果页面的所有功能模块</p>
        <div class="mt-4">
            <button onclick="startQuickTest()" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors mr-4">
                <i class="fas fa-bolt mr-2"></i>快速测试
            </button>
            <button onclick="startFullTest()" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
                <i class="fas fa-play mr-2"></i>完整测试
            </button>
        </div>
    </div>

    <div class="container mx-auto px-4 pb-8">
        <!-- 测试功能介绍 -->
        <div class="test-features">
            <h3 class="text-2xl font-bold text-white mb-4">
                <i class="fas fa-star mr-2"></i>测试功能特性
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="test-feature">
                    <i class="fas fa-list"></i>
                    <div>
                        <strong>分页控件测试</strong><br>
                        <small>验证分页按钮布局、页面大小选择器、响应式适配</small>
                    </div>
                </div>
                <div class="test-feature">
                    <i class="fas fa-eye"></i>
                    <div>
                        <strong>详情界面测试</strong><br>
                        <small>测试5种分析类型详情展示、可视化组件、模态框交互</small>
                    </div>
                </div>
                <div class="test-feature">
                    <i class="fas fa-mobile-alt"></i>
                    <div>
                        <strong>响应式设计测试</strong><br>
                        <small>验证不同设备尺寸下的布局适配和触控支持</small>
                    </div>
                </div>
                <div class="test-feature">
                    <i class="fas fa-user"></i>
                    <div>
                        <strong>用户体验测试</strong><br>
                        <small>测试加载状态、错误处理、键盘导航等交互体验</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- 测试选项卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 基础功能测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #3498db, #2980b9);">
                    <i class="fas fa-cogs"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">基础功能测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    测试页面基础元素、Tab切换、管理器初始化等核心功能
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>页面元素检查</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Tab切换功能</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>管理器初始化</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>事件绑定</li>
                </ul>
                <button onclick="runBasicTest()" class="test-btn" style="background: linear-gradient(45deg, #3498db, #2980b9); color: white;">
                    开始测试
                </button>
            </div>

            <!-- 分页控件测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #2ecc71, #27ae60);">
                    <i class="fas fa-list"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">分页控件测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    全面测试分页控件的功能，包括按钮布局、页面大小选择、响应式适配
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>分页元素检查</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>页面大小选择器</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>按钮布局测试</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>响应式分页</li>
                </ul>
                <button onclick="runPaginationTest()" class="test-btn" style="background: linear-gradient(45deg, #2ecc71, #27ae60); color: white;">
                    开始测试
                </button>
            </div>

            <!-- 详情界面测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #e74c3c, #c0392b);">
                    <i class="fas fa-eye"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">详情界面测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    测试详情模态框、5种分析类型展示、可视化组件等功能
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>模态框功能</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>详情渲染</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>分析类型支持</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>可视化组件</li>
                </ul>
                <button onclick="runDetailTest()" class="test-btn" style="background: linear-gradient(45deg, #e74c3c, #c0392b); color: white;">
                    开始测试
                </button>
            </div>

            <!-- 响应式设计测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #f39c12, #e67e22);">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">响应式设计测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    验证在不同设备尺寸下的页面布局适配和触控支持
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>移动端适配</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>平板端适配</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>桌面端适配</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>触控支持</li>
                </ul>
                <button onclick="runResponsiveTest()" class="test-btn" style="background: linear-gradient(45deg, #f39c12, #e67e22); color: white;">
                    开始测试
                </button>
            </div>

            <!-- 用户体验测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #9b59b6, #8e44ad);">
                    <i class="fas fa-user"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">用户体验测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    测试用户交互体验，包括加载状态、错误处理、键盘导航等
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>加载状态</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>错误处理</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>键盘导航</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>交互反馈</li>
                </ul>
                <button onclick="runUserExperienceTest()" class="test-btn" style="background: linear-gradient(45deg, #9b59b6, #8e44ad); color: white;">
                    开始测试
                </button>
            </div>

            <!-- 性能测试 -->
            <div class="test-card">
                <div class="test-icon" style="background: linear-gradient(45deg, #1abc9c, #16a085);">
                    <i class="fas fa-tachometer-alt"></i>
                </div>
                <h3 class="text-xl font-bold text-center mb-4">性能测试</h3>
                <p class="text-gray-600 text-center mb-6">
                    测试页面加载性能、内存使用、响应时间等性能指标
                </p>
                <ul class="text-sm text-gray-600 mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>页面加载时间</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>内存使用</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>响应时间</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>资源优化</li>
                </ul>
                <button onclick="runPerformanceTest()" class="test-btn" style="background: linear-gradient(45deg, #1abc9c, #16a085); color: white;">
                    开始测试
                </button>
            </div>
        </div>

        <!-- 测试说明 -->
        <div class="test-card mt-8">
            <h3 class="text-2xl font-bold text-center mb-6">测试说明</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h4 class="font-semibold text-lg mb-3">测试环境要求</h4>
                    <ul class="text-gray-600 space-y-2">
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>现代浏览器（Chrome、Firefox、Safari、Edge）</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>JavaScript ES6+ 支持</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>稳定的网络连接</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>开发环境配置</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-lg mb-3">注意事项</h4>
                    <ul class="text-gray-600 space-y-2">
                        <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>测试过程可能需要几分钟</li>
                        <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>请确保页面完全加载后再开始测试</li>
                        <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>测试结果会自动保存到本地</li>
                        <li><i class="fas fa-info-circle text-blue-500 mr-2"></i>遇到问题请查看控制台日志</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 测试状态指示器 -->
    <div id="testStatus" class="test-status hidden">
        <div class="flex items-center justify-between mb-2">
            <h4 class="font-semibold">测试状态</h4>
            <button onclick="hideTestStatus()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div id="testStatusContent">
            <p>准备开始测试...</p>
        </div>
        <div class="progress-bar">
            <div id="progressFill" class="progress-fill"></div>
        </div>
    </div>
</div>

<!-- 嵌入实际的分析结果页面内容（隐藏） -->
<div id="analysisResultsPage" class="hidden">
    {% include "analysis-results.html" %}
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/analysis-results.js"></script>
<script src="/static/js/test/analysis-results-test-suite.js"></script>
<script>
    // 测试启动函数
    function showTestStatus(message, progress = 0) {
        const status = document.getElementById('testStatus');
        const content = document.getElementById('testStatusContent');
        const progressFill = document.getElementById('progressFill');

        status.classList.remove('hidden');
        content.innerHTML = `<p>${message}</p>`;
        progressFill.style.width = `${progress}%`;
    }

    function hideTestStatus() {
        document.getElementById('testStatus').classList.add('hidden');
    }

    function updateProgress(message, progress) {
        showTestStatus(message, progress);
    }

    // 快速测试 - 只运行基础功能测试
    function startQuickTest() {
        showTestStatus('正在运行快速测试...', 10);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=quick';
        }, 1000);
    }

    // 完整测试 - 运行所有测试
    function startFullTest() {
        showTestStatus('正在准备完整测试...', 10);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=full';
        }, 1000);
    }

    // 运行特定测试
    function runBasicTest() {
        showTestStatus('正在启动基础功能测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=basic';
        }, 1000);
    }

    function runPaginationTest() {
        showTestStatus('正在启动分页控件测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=pagination';
        }, 1000);
    }

    function runDetailTest() {
        showTestStatus('正在启动详情界面测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=detail';
        }, 1000);
    }

    function runResponsiveTest() {
        showTestStatus('正在启动响应式设计测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=responsive';
        }, 1000);
    }

    function runUserExperienceTest() {
        showTestStatus('正在启动用户体验测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=ux';
        }, 1000);
    }

    function runPerformanceTest() {
        showTestStatus('正在启动性能测试...', 20);
        setTimeout(() => {
            window.location.href = '/analysis-results?test=performance';
        }, 1000);
    }

    // 检查URL参数，自动启动测试
    document.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search);
        const testType = urlParams.get('test');

        if (testType) {
            showTestStatus(`正在启动${testType}测试...`, 0);

            // 延迟启动测试，确保页面完全加载
            setTimeout(() => {
                if (typeof startAnalysisResultsTest === 'function') {
                    startAnalysisResultsTest();
                } else {
                    console.error('测试套件未加载');
                    showTestStatus('测试套件加载失败', 0);
                }
            }, 2000);
        }
    });

    // 页面加载完成后的初始化
    window.addEventListener('load', () => {
        console.log('🧪 分析结果页面测试环境已准备就绪');
        console.log('💡 可用的测试函数：');
        console.log('  - startQuickTest()');
        console.log('  - startFullTest()');
        console.log('  - runBasicTest()');
        console.log('  - runPaginationTest()');
        console.log('  - runDetailTest()');
        console.log('  - runResponsiveTest()');
        console.log('  - runUserExperienceTest()');
        console.log('  - runPerformanceTest()');
    });
</script>
{% endblock %}